<template>
	<view>
		<view>
			<view class="form-item cu-form-group">
				<view class="title">招聘小组</view>
				<picker @change="groupChange" :value="index" :range="group" range-key="name">
					<view class="picker">
						{{groupCount}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">所属企业</view>
				<picker @change="componyChange" :value="index1" :range="compony" range-key="name">
					<view class="picker">
						{{componyCount}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">岗位名称</view>
				<input placeholder="请输入企业名称" name="input" v-model="postName" class="text-r"></input>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">岗位类型</view>
				<picker @change="postTypeChange" :value="index2" :range="postType" range-key="name">
					<view class="picker">
						{{postTypeCount}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">学历/学位</view>
				<picker @change="degreeChange" :value="index3" :range="degree" range-key="name">
					<view class="picker">
						{{degreeCount}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">招聘总人数</view>
				<input placeholder="请输入人数" name="input" v-model="headcount" class="text-r" type="number"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">年龄</view>
				<picker @change="ageChange" :value="index7" :range="ageArray" mode="multiSelector">
					<view class="picker flex rce age-item" v-if="((age_lower == '不限') && (age_upper == '不限'))">不限</view>
					<view class="picker flex rce" v-else>
						<view class="age-item">{{age_lower}}</view>
						<view class="line-style horizontal-line time-during-line"></view>
						<view class="age-item">{{age_upper}}</view>
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">性别要求</view>
				<picker @change="sexChange" :value="index6" :range="sex" range-key="name">
					<view class="picker">
						{{sexCount}}
					</view>
				</picker>
				<!-- <input placeholder="请输入数量" name="input" v-model="sexNum" class="text-r"></input> -->
			</view>
			<!-- <view class="form-item cu-form-group">
				<view class="title">性别要求</view>
				<checkbox-group @change="checkboxSexChange" class="wrap">
					<label class="uni-list-cell uni-list-cell-pd flex set-margin" :key="index">
						<view>
							<checkbox :value="0"/>
						</view>
						<view class="check-title">不限</view>
					</label>
					<view class="flex align-item">
						<label class="uni-list-cell uni-list-cell-pd flex set-margin" :key="index">
							<view>
								<checkbox :value="1"/>
							</view>
							<view class="check-title">男</view>
						</label>
						<input type="text" placeholder="数量" class="ipt" v-model="boyNum">
					</view>
					<view class="flex align-item">
						<label class="uni-list-cell uni-list-cell-pd flex set-margin" :key="index">
							<view>
								<checkbox :value="2"/>
							</view>
							<view class="check-title">女</view>
						</label>
						<input type="text" placeholder="数量" class="ipt" v-model="womenNum">
					</view>
				</checkbox-group>
			</view> -->
			<view class="form-item cu-form-group">
				<view class="title">任务类型</view>
				<picker @change="taskTypeChange" :value="index4" :range="taskType" range-key="name">
					<view class="picker">
						{{taskTypeCount}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">截止日期</view>
				<picker mode="date" :value="date || 0" start="2015-09-01" end="2020-09-01" @change="DateChange">
					<view class="picker">
						{{date || '请选择'}}
					</view>
				</picker>
			</view>
			<view class="form-item cu-form-group">
				<view class="title">薪资类型</view>
				<picker @change="payTypeChange" :value="index5" :range="payType" range-key="name">
					<view class="picker">
						{{payTypeCount}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">薪资(元)</view>
				<input placeholder="请输入薪资" name="input" v-model="money" class="text-r"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title top-top">岗位描述</view>
				<textarea class="text-area-item" v-model="remark" placeholder="请输入岗位描述"></textarea>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title top-top">相关经验</view>
				<textarea class="text-area-item" v-model="exp" placeholder="请输入相关经验"></textarea>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title top-top">专业技能</view>
				<textarea class="text-area-item" v-model="skill" placeholder="请输入专业技能"></textarea>
			</view>
			<view class="group">
				<view class="uni-list set-padding">
					<view>额外补助:</view>
					<checkbox-group @change="checkboxChange" class="flex wrap">
						<label class="uni-list-cell uni-list-cell-pd flex set-margin" v-for="(item,index) in subsidyList" :key="index">
							<view>
								<checkbox :value="item.id" :checked="item.checked" />
							</view>
							<view class="check-title">{{item.name}}</view>
						</label>
					</checkbox-group>
				</view>
			</view>

			<view class="flex flex-sty">
				<view class="btm-btn" @tap="handleClickSave">保存</view>
				<view class="btm-btn" @tap="handleClickCancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let ageArrayItem = [18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
				41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60
			];
			let age_lower_index = 0;
			let age_upper_index = 0;
			return {
				msg: '', //错误提示
				id: '',
				check: true,
				checked: false,
				token: '',
				// 招聘小组
				group: [],
				index: -1,
				groupName: '',
				// 所属企业
				compony: [],
				index1: -1,
				componyName: '',
				// 岗位类型
				postType: [],
				index2: -1,
				postTypeName: '',
				// 学历/学位
				degree: [],
				index3: -1,
				degreeName: '',
				// 任务类型
				taskType: [],
				index4: -1,
				taskTypeName: '',
				// 截止日期
				date: '',
				// 薪资类型
				payType: [],
				index5: -1,
				payTypeName: '',
				// 性别要求
				sex: [],
				index6: -1,
				sexName: '',
				sexNum: '', //需要的人数
				// 薪资
				money: '',
				// 岗位描述
				remark: '',
				// 相关经验
				exp: '',
				// 专业技能
				skill: '',
				modalName: '',
				// 额外补助
				subsidyList: [],
				// 性别要求
				boyNum: '', //男
				womenNum: '', //女
				age_lower_index,
				age_upper_index,
				index7: [age_lower_index, age_upper_index],
				ageArrayItem: ageArrayItem,
				ageArray: [
					ageArrayItem,
					ageArrayItem,
				],


				// 后台需要的数据
				group_id: '', //招聘小组id
				compony_id: '', //所属企业id
				postName: '', //岗位名称
				postType_id: '', //岗位类型id
				degree_id: '', //学历/学位id
				taskType_id: '', //任务类型id
				payType_id: '', //薪资类型id
				sex_id: [], //性别要求id
				headcount: '', //招聘总人数
				age_lower: '', //年龄下限
				age_upper: '', //年龄上限
				subsidy: [], //额外补助
			}
		},
		onLoad(option) {
			if (option.item) {
				console.log("传过来了吗", JSON.parse(option.subsidy))
				this.check = false;
				this.checked = true;
				let items = JSON.parse(decodeURIComponent(option.item))
				this.id = items.id
				let checkedList = JSON.parse(option.subsidy)
				this.subsidyList = checkedList
				console.log('subsidyList---->', this.subsidyList)
				// this.getPositionDetail();
				this.subsidy = items.subsidy_arr;
				this.group_id = items.recruit_team_id; //招聘小组id
				this.groupName = items.recruit_team_name; //招聘小组
				this.compony_id = items.company_id; //所属企业id
				this.componyName = items.company_name_; //所属企业
				this.postName = items.name; //岗位名称
				this.postType_id = items.type_id; //岗位类型id
				//少岗位类型
				this.postTypeName = items.position_type.name
				this.degree_id = items.edu_id; //学历id
				//少学历
				this.degreeName = items.edu_name_str;
				this.headcount = items.person_num; //招聘总人数
				this.age_lower = items.age_lower; //年龄下限
				this.age_upper = items.age_upper; //年龄上限
				this.age_lower_index = this.ageArrayItem.findIndex(i => i == items.age_lower);
				this.age_upper_index = this.ageArrayItem.findIndex(i => i == items.age_upper);
				this.index7 = [this.age_lower_index, this.age_upper_index];
				this.sex_id = items.sex; //性别要求
				this.sexName = items.sex_desc;
				this.sexNum = items.person_num
				this.taskType_id = items.recruit_type; //任务类型id
				//任务类型
				this.taskTypeName = items.recruit_type_str;
				this.date = items.end_date; //截止日期
				this.payType_id = items.money_type; //薪资类型id
				//薪资类型 
				this.payTypeName = items.money_type_str;
				this.money = items.money; //薪资
				this.remark = items.remark; //岗位描述
				this.exp = items.exp; //相关经验
				this.skill = items.skill; //专业技能

			}

		},
		methods: {
			// 取token
			getToken() {
				try {
					const value = uni.getStorageSync('login_key');
					if (value) {
						this.token = value;
					}
				} catch (e) {
					// error
				}
			},
			// 点击取消
			handleClickCancel() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			// 点击保存发请求
			async handleClickSave() {
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				var prevPage = pages[pages.length - 2]; //上一个页面
				//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				prevPage && prevPage.setData && prevPage.setData({
					isDoRefresh: true
				});
				this.getToken();
				
				let url = this.ServicesApi.positionCreateEdit;
				let data = {
						id: this.id || '', //这个有值就是修改，没值就是新增
						recruit_team_id: this.group_id, //招聘小组id
						company_id: this.compony_id, //企业id
						name: this.postName, //招聘任务岗位名称
						type_id: this.postType_id, //岗位类型id
						edu_id: this.degree_id, //学历
						person_num: this.headcount, //招聘总人数
						age_lower: this.age_lower, //年龄下限
						age_upper: this.age_upper, //年龄上限
						sex: this.sex_id, //性别要求0无限制1男2女
						man_num: this.boyNum, //男性要求数量
						woman_num: this.womenNum, //女性要求数量
						recruit_type: this.taskType_id, //任务类型
						end_date: this.date, //截止日期
						money_type: this.payType_id, //薪资类型
						money: this.money, //薪资
						remark: this.remark, //岗位描述
						exp: this.exp, //相关经验
						skill: this.skill, //专业技能
						subsidy: this.subsidy, //额外补助 这个最少一个值
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
				    uni.showToast({
				        icon: 'none',
				        title: result.msg,
				    });
				    uni.navigateBack({
				        delta: 1,
				        animationType: 'pop-out',
				        animationDuration: 200
				    });
				} else {
				    uni.showToast({
				        icon: 'none',
				        title: result.msg,
				    });
				}
				// uni.request({
				// 	url: this.ServicesApi.positionCreateEdit,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,
				// 		id: this.id || '', //这个有值就是修改，没值就是新增
				// 		recruit_team_id: this.group_id, //招聘小组id
				// 		company_id: this.compony_id, //企业id
				// 		name: this.postName, //招聘任务岗位名称
				// 		type_id: this.postType_id, //岗位类型id
				// 		edu_id: this.degree_id, //学历
				// 		person_num: this.headcount, //招聘总人数
				// 		age_lower: this.age_lower, //年龄下限
				// 		age_upper: this.age_upper, //年龄上限
				// 		sex: this.sex_id, //性别要求0无限制1男2女
				// 		man_num: this.boyNum, //男性要求数量
				// 		woman_num: this.womenNum, //女性要求数量
				// 		recruit_type: this.taskType_id, //任务类型
				// 		end_date: this.date, //截止日期
				// 		money_type: this.payType_id, //薪资类型
				// 		money: this.money, //薪资
				// 		remark: this.remark, //岗位描述
				// 		exp: this.exp, //相关经验
				// 		skill: this.skill, //专业技能
				// 		subsidy: this.subsidy, //额外补助 这个最少一个值
				// 	},
				// 	success: (res) => {
				// 		// console.log(res.data)
				// 		if (res.data.code == 0) {
				// 			uni.showToast({
				// 				icon: 'none',
				// 				title: res.data.msg,
				// 			});
				// 			return false
				// 		} else {
				// 			// uni.navigateTo({
				// 			// 	url:'./positionTaskList'
				// 			// })
				// 			uni.navigateBack({
				// 				delta: 1,
				// 				animationType: 'pop-out',
				// 				animationDuration: 200
				// 			});
				// 			uni.showToast({
				// 				title: res.data.msg
				// 			});
				// 		}
				// 	}
				// });
			},
			// 请求最下边的多选==>编辑
			// getPositionDetail(){
			// 	this.getToken()
			// 	// 发请求
			// 	
			// },
			// 请求搜索数据
			async getPositionOption() {
				this.getToken()
				// 发请求
				let url = this.ServicesApi.positionOption;
				let data = {
				    name: this.name,
				    id: this.changeId || '', //有值就是修改，没值就是新增
				};
				let result = await this.Services.post(url, data);
				if (result.code == this.StatusCode.SUCCESS_CODE) {
				    this.group = result.data.recruit_team_List;
				    this.compony = result.data.company_list;
				    this.postType = result.data.position_type_list;
				    this.degree = result.data.education;
				    this.taskType = result.data.recruit_type;
				    this.payType = result.data.money_type;
				    // this.subsidyList = result.data.subsidy_list;
				    this.sex = result.data.sex;
				}
				// uni.request({
				// 	url: this.ServicesApi.positionOption,
				// 	method: 'POST',
				// 	header: {
				// 		"content-type": "application/x-www-form-urlencoded"
				// 	},
				// 	data: {
				// 		token: this.token,

				// 	},
				// 	success: (res) => {
				// 		// console.log(res.data.data)
				// 		// console.log(res.data.data.subsidy_list)
				// 		this.group = res.data.data.recruit_team_List;
				// 		this.compony = res.data.data.company_list;
				// 		this.postType = res.data.data.position_type_list;
				// 		this.degree = res.data.data.education;
				// 		this.taskType = res.data.data.recruit_type;
				// 		this.payType = res.data.data.money_type;
				// 		// this.subsidyList = res.data.data.subsidy_list;
				// 		this.sex = res.data.data.sex;
				// 	}
				// });
			},
			// 搜索客户状态
			groupChange(e) {
				this.groupName = '';
				uni.hideKeyboard();
					this.index = e.detail.value
				this.group_id = this.group[this.index].id
			},
			// 所属企业
			componyChange(e) {
				this.componyName = '';
				uni.hideKeyboard();
					this.index1 = e.detail.value
				this.compony_id = this.compony[this.index1].id
			},
			// 岗位类型
			postTypeChange(e) {
				this.postTypeName = '';
				uni.hideKeyboard();
					this.index2 = e.detail.value
				this.postType_id = this.postType[this.index2].id
			},
			// 学历/学位
			degreeChange(e) {
				this.degreeName = '';
				uni.hideKeyboard();
					this.index3 = e.detail.value
				this.degree_id = this.degree[this.index3].id
			},
			// 学历/学位
			ageChange(e) {
				console.log('e---->', e);
				uni.hideKeyboard();
				this.index7 = e.detail.value
				let age_lower_index = this.index7[0];
				let age_upper_index = this.index7[1];
				if (age_lower_index > age_upper_index && (age_upper_index > 0)) {
					uni.showToast({
						icon: 'none',
						title: '最大年龄必须大于等于最小年龄',
					});
					return false;
				}
				this.age_lower = this.ageArray[0][age_lower_index];
				this.age_upper = this.ageArray[1][age_upper_index];
			},
			// 任务类型
			taskTypeChange(e) {
				this.taskTypeName = '';
				uni.hideKeyboard();
					this.index4 = e.detail.value
				this.taskType_id = this.taskType[this.index4].id
			},
			// 截止日期
			DateChange(e) {
				uni.hideKeyboard();
				this.date = e.detail.value;
				// console.log(this.date)
			},
			// 薪资类型
			payTypeChange(e) {
				this.payTypeName = '';
				uni.hideKeyboard();
					this.index5 = e.detail.value
				this.payType_id = this.payType[this.index5].id
			},
			// 性别要求
			sexChange(e) {
				this.sexName = '';
				uni.hideKeyboard();
					this.index6 = e.detail.value
				this.sex_id = this.sex[this.index6].id
			},
			// 额外补助
			checkboxChange(e) {
				uni.hideKeyboard();
				let items = e.detail.value
				this.subsidy = items;
			},
			// 性别要求
			checkboxSexChange(e) {
				uni.hideKeyboard();
				let items = e.detail.value
				this.sex_id = items;
			}
		},
		computed: {
			// 客户状态
			groupCount() {
				if (this.groupName) {
					return this.groupName
				} else {
					return this.index > -1 ? this.group[this.index].name : '请选择'
				}
			},
			// 所属企业
			componyCount() {
				if (this.componyName) {
					return this.componyName
				} else {
					return this.index1 > -1 ? this.compony[this.index1].name : '请选择'
				}
			},
			// 岗位类型
			postTypeCount() {
				if (this.postTypeName) {
					return this.postTypeName
				} else {
					return this.index2 > -1 ? this.postType[this.index2].name : '请选择'
				}
			},
			// 学历/学位
			degreeCount() {
				if (this.degreeName) {
					return this.degreeName
				} else {
					return this.index3 > -1 ? this.degree[this.index3].name : '请选择'
				}
			},
			// 任务类型
			taskTypeCount() {
				if (this.taskTypeName) {
					return this.taskTypeName
				} else {
					return this.index4 > -1 ? this.taskType[this.index4].name : '请选择'
				}
			},
			// 薪资类型
			payTypeCount() {
				if (this.payTypeName) {
					return this.payTypeName
				} else {
					return this.index5 > -1 ? this.payType[this.index5].name : '请选择'
				}
			},
			// 性别要求
			sexCount() {
				if (this.sexName) {
					return this.sexName
				} else {
					return this.index6 > -1 ? this.sex[this.index6].name : '请选择'
				}
			},
			// 岗位描述

		},
		mounted() {
			this.getPositionOption();
		}
	}
</script>

<style scoped lang="stylus">
	.top-top {
		margin-bottom: 95upx;
	}

	.check-title {
		margin-left: 12upx;
	}

	.msg {
		height: 50upx;
		color: red;
	}

	.ipt {
		// display:block;
		// width:40upx;
		// padding:0;
		// margin:0;
		text-align: left;
	}

	.align-item {
		align-items: center;
	}
	
	.text-area-item {
		padding: 0 10rpx;
	}

	.wrap {
		flex-wrap: wrap;
		// width:300upx;
	}

	.set-margin {
		margin: 20upx;
		align-items: center;
	}

	.set-padding {
		padding: 30upx;
	}

	.flex-sty {
		justify-content space-around;
		margin: 50upx 0;
	}

	.time-during-line {
		width: 30rpx;
		margin: 0 10rpx;
	}

	.time-input-item {
		width: 260rpx;
		flex: none;
	}

	.btm-btn {
		height: 100upx;
		width: 200upx;
		text-align: center;
		line-height: 100upx;
		color: #fff;
		background: #007AFF;
	}
</style>
